<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>

<%@include file="../include/base.jsp" %>
<!DOCTYPE HTML>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">	
	<title>CRM-task</title>
	<%@ include file="../include/head.jsp" %>
	<meta charset="UTF-8">
	<title></title>
</head>
<body class="crm">
	
	<jsp:include page="../include/top.jsp">
		<jsp:param value="task" name="tag"/>
	</jsp:include>
	
	<div class="container-fluid">
		<div class="row-fluid">
			<div class="span8">
				<div class="well screen">
					<div class="page-header header">

						<div class="right-links">
							<a href="task.action" class="current">待办任务</a> |
							<a href="complete.action">已完成的任务</a>
						</div>
						待办任务
					</div>
					<div class="main" id="main">
	
						<div id="tasks_div">
							<div id="upcoming_tasks">
								
								<c:if test="${fn:length(taskList) == 0}">
									<div class="alert alert-info">
									没有待办任务，或者已经完成了所有任务！您可以
									<a class="btn btn-success" data-toggle="modal" href="#taskModal">
										<i class="icon-plus"></i>
										添加任务
									</a>
									</div>
								</c:if>
							<div id="screen_body">
							
							<c:if test="${fn:length(oldList) > 0 }">
								
									<div class="tasks overdue">
										<legend>已过期</legend>
										
										<c:forEach items="${oldList }" var="t">
											
										<div id="task_818252" class="task checkbox">
										<span class="task_hover">
												<div class="task_actions" style="display: none; ">
													<a href="javascript:;" onclick="deleteTask(this)"  id="${t.id }" class="icon icon-trash" data-confirm="您确定要删除这个任务吗？" data-method="delete"  title="删除这个任务"></a>
													<a href="#" class="icon-edit" id="${t.id }" onclick="edittask(this)"></a>
												</div>
											
											<input id="${t.id }" name="task_done" onclick="done_task(this)" type="checkbox" value="1">
									
												<blockquote>
												<span style="background:#${t.tasktype.color};border-radius: 3px 3px 3px 3px;padding:1px 5px;color:#fff">${t.tasktype.type }</span>
												  <span>${t.title }</span>
												  <c:if test="${t.deal  != null}">
												 	( <i class="icon-dollar"></i>
												 	<a href="${basePath }/deal/show.action?id=${t.deal.id}">${t.deal.title }</a> )
												 </c:if>
												 <c:if test="${t.contact  != null}">
												 	( <i class="icon-person"></i>
												 	<a href="${basePath }/contact/show.action?id=${t.contact.id}">${t.contact.name }</a> )
												 </c:if>
												  <small>【${t.start } - ${t.end}】</small>
												</blockquote>
											</span>
										
										</div>
										
			<div class="edit" style="display:none; border:#CACED5 5px solid;width:450px">
			<form accept-charset="UTF-8"  action="${basePath}/task/saveedit.action" class="form-inline" id="edit_category" method="post">
			<input id="user_id" name="user.id" type="hidden" value="${user.id }">
			<input id="task_id" name="task.id" type="hidden" value="${t.id }">
			<input id="task_type_id"  type="hidden" value="${t.tasktype.id }">
			<div class="modal-header">
				<h3>编辑这个任务</h3>
			</div>
			
			<div class="modal-body">
				<div class="control-group string optional">
					<div class="controls">
						<input class="string optional span9" id="task_title" name="task.title" size="50" type="text" value="${t.title }">
					</div>
				</div>
			
				<div class="control-group string optional">
					<label class="string optional control-label" for="schedule_frame"> 到期时间？</label>
					<div class="controls">
						<select id="task_frame" name="time" onchange="change_task_frame($(this).val(), '#calendar_start_old','#calendar_end_old')">
							<option value="today" selected="selected">今天</option>
							<option value="tomorrow">明天</option>
							<option value="calendar">设置具体时间 ...</option>
						</select>
					</div>
				</div>		
				<span id="calendar_select">
					<input id="calendar_start_old" name="task.start" type="text" onclick="WdatePicker({minDate:'%y-%M-{%d}',readOnly:true,dateFmt:'yyyy-MM-dd  HH:mm:ss',lang:'zh-cn'})" class="Wdate span2" placeholder="请输入开始时间" style=" width:200px ;display:none; "/>
					&nbsp;
					<input id="calendar_end_old" name="task.end" type="text" onclick="WdatePicker({readOnly:true,minDate:'#F{$dp.$D(\'calendar_date_start\')}',dateFmt:'yyyy-MM-dd  HH:mm:ss',lang:'zh-cn'})" class="Wdate span2" placeholder="请输入结束时间" style=" width:200px ;display:none; "/>
				</span>
				
				<div class="control-group integer optional">
					<label class="integer optional control-label" for="tasktype_id"> 选择一个分类</label>
					<div class="controls">
						<select  id="tasktype_id" name="tasktype.id" onchange="changeType(this)">
							<option value="">无</option>
							
							<c:forEach items="${tasktypeList}" var="tasktype">
								<option id="select" value="${tasktype.id }">${tasktype.type }</option>
							</c:forEach>
							
							<option value="new">添加分类 ...</option>
						</select>
							<a href="${basePath }/crm/task/edittype.action">编辑分类</a>
					</div>
				</div>	
			</div>
			
			<button type="submit" class="btn btn-primary">保存修改</button>
				<button type="button" class="btn cancel">取消</button>
			</form>
		</div>
			
									</c:forEach>
									</div>	
								</c:if>
								
								<c:if test="${fn:length(todayList) > 0 }">
									<div class="tasks today" id="task_today">
										<legend>今天</legend>
										<c:forEach items="${todayList }" var="t">
											
										<div id="task_today" class="task checkbox">
											<span class="task_hover">
												<div class="task_actions" style="display: none; ">
													<a href="javascript:;" onclick="deleteTask(this)"  id="${t.id }" class="icon icon-trash" data-confirm="您确定要删除这个任务吗？" data-method="delete"   title="删除这个任务"></a>
													<a href="#" class="icon-edit" id="${t.id }" onclick="edittask(this)"></a>
												</div>
											
											<input  id="${t.id }" name="task_done" onclick="done_task(this)" type="checkbox" value="1">
												<blockquote>
												<span style="background:#${t.tasktype.color};border-radius: 3px 3px 3px 3px;padding:1px 5px;color:#fff">${t.tasktype.type }</span>
												  <span>${t.title }</span>
												  <c:if test="${t.deal  != null}">
												 	( <i class="icon-dollar"></i>
												 	<a href="${basePath }/deal/show.action?id=${t.deal.id}">${t.deal.title }</a> )
												 </c:if>
												 <c:if test="${t.contact  != null}">
												 	( <i class="icon-person"></i>
												 	<a href="${basePath }/contact/show.action?id=${t.contact.id}">${t.contact.name }</a> )
												 </c:if>
												</blockquote>
											</span>
											
										</div>
										
		<div class="edit" style="display:none; border:#CACED5 5px solid;width:450px">
			<form accept-charset="UTF-8"  action="${basePath}/task/saveedit.action" class="form-inline" id="edit_category" method="post">
			<input id="user_id" name="user.id" type="hidden" value="${user.id }">
			<input id="task_id" name="task.id" type="hidden" value="${t.id }">
			<input id="task_type_id"  type="hidden" value="${t.tasktype.id }">
			<div class="modal-header">
				<h3>编辑这个任务</h3>
			</div>
			
			<div class="modal-body">
				<div class="control-group string optional">
					<div class="controls">
						<input class="string optional span9" id="task_title" name="task.title" size="50" type="text" value="${t.title }">
					</div>
				</div>
			
				<div class="control-group string optional">
					<label class="string optional control-label" for="schedule_frame"> 到期时间？</label>
					<div class="controls">
						<select id="task_frame" name="time" onchange="change_task_frame($(this).val(), '#calendar_start','#calendar_end')">
							<option value="today" selected="selected">今天</option>
							<option value="tomorrow">明天</option>
							<option value="calendar">设置具体时间 ...</option>
						</select>
					</div>
				</div>		
				<span id="calendar_select">
					<input id="calendar_start" name="task.start" type="text" onclick="WdatePicker({minDate:'%y-%M-{%d}',readOnly:true,dateFmt:'yyyy-MM-dd  HH:mm:ss',lang:'zh-cn'})" class="Wdate span2" placeholder="请输入开始时间" style=" width:200px ;display:none; "/>
					&nbsp;
					<input id="calendar_end" name="task.end" type="text" onclick="WdatePicker({readOnly:true,minDate:'#F{$dp.$D(\'calendar_date_start\')}',dateFmt:'yyyy-MM-dd  HH:mm:ss',lang:'zh-cn'})" class="Wdate span2" placeholder="请输入结束时间" style=" width:200px ;display:none; "/>
				</span>
				
				<div class="control-group integer optional">
					<label class="integer optional control-label" for="tasktype_id"> 选择一个分类</label>
					<div class="controls">
						<select  id="tasktype_id" name="tasktype.id" onchange="changeType(this)">
							<option value="">无</option>
							
							<c:forEach items="${tasktypeList}" var="tasktype">
								<option id="select" value="${tasktype.id }">${tasktype.type }</option>
							</c:forEach>
							
							<option value="new">添加分类 ...</option>
						</select>
							<a href="${basePath }/crm/task/edittype.action">编辑分类</a>
					</div>
				</div>	
			</div>
			
			<button type="submit" class="btn btn-primary">保存修改</button>
				<button type="button" class="btn cancel">取消</button>
			</form>
		</div>
										
										</c:forEach>
									</div>
								</c:if>

										
								<c:if test="${fn:length(tomorrowList) > 0 }">
									<div class="tasks tomorrow">
										<legend>明天</legend>
										
										<c:forEach items="${tomorrowList }" var="t">
											
										<div id="task_818252" class="task checkbox">
										<span class="task_hover">
												<div class="task_actions" style="display: none; ">
													<a href="javascript:;" onclick="deleteTask(this)" id="${t.id }" class="icon icon-trash" data-confirm="您确定要删除这个任务吗？" data-method="delete"  title="删除这个任务"></a>
													<a href="#" class="icon-edit" id="${t.id }" onclick="edittask(this)"></a>
												</div>
											
											<input  id="${t.id }" name="task_done" onclick="done_task(this)" type="checkbox" value="1">
									
												<blockquote>
												<span style="background:#${t.tasktype.color};border-radius: 3px 3px 3px 3px;padding:1px 5px;color:#fff">${t.tasktype.type }</span>
												 <span>${t.title }</span>
												 <c:if test="${t.deal  != null}">
												 	( <i class="icon-dollar"></i>
												 	<a href="${basePath }/deal/show.action?id=${t.deal.id}">${t.deal.title }</a> )
												 </c:if>
												 <c:if test="${t.contact  != null}">
												 	( <i class="icon-person"></i>
												 	<a href="${basePath }/contact/show.action?id=${t.contact.id}">${t.contact.name }</a> )
												 </c:if>
												  <small>【${t.start } - ${t.end}】</small>
												</blockquote>
											</span>
										
										</div>
										
		<div class="edit" style="display:none; border:#CACED5 5px solid;width:450px">
			<form accept-charset="UTF-8"  action="${basePath}/task/saveedit.action" class="form-inline" id="edit_category" method="post">
			<input id="user_id" name="user.id" type="hidden" value="${user.id }">
			<input id="task_id" name="task.id" type="hidden" value="${t.id }">
			<input id="task_type_id"  type="hidden" value="${t.tasktype.id }">
			<div class="modal-header">
				<h3>编辑这个任务</h3>
			</div>
			
			<div class="modal-body">
				<div class="control-group string optional">
					<div class="controls">
						<input class="string optional span9" id="task_title" name="task.title" size="50" type="text" value="${t.title }">
					</div>
				</div>
			
				<div class="control-group string optional">
					<label class="string optional control-label" for="schedule_frame"> 到期时间？</label>
					<div class="controls">
						<select id="task_frame" name="time" onchange="change_task_frame($(this).val(), '#calendar_start_tom','#calendar_end_tom')">
							<option value="today" selected="selected">今天</option>
							<option value="tomorrow" selected="selected">明天</option>
							<option value="calendar">设置具体时间 ...</option>
						</select>
					</div>
				</div>		
				<span id="calendar_select">
					<input id="calendar_start_tom" name="task.start" type="text" onclick="WdatePicker({minDate:'%y-%M-{%d}',readOnly:true,dateFmt:'yyyy-MM-dd  HH:mm:ss',lang:'zh-cn'})" class="Wdate span2" placeholder="请输入开始时间" style=" width:200px ;display:none; "/>
					&nbsp;
					<input id="calendar_end_tom" name="task.end" type="text" onclick="WdatePicker({readOnly:true,minDate:'#F{$dp.$D(\'calendar_date_start\')}',dateFmt:'yyyy-MM-dd  HH:mm:ss',lang:'zh-cn'})" class="Wdate span2" placeholder="请输入结束时间" style=" width:200px ;display:none; "/>
				</span>
				
				<div class="control-group integer optional">
					<label class="integer optional control-label" for="tasktype_id"> 选择一个分类</label>
					<div class="controls">
						<select  id="tasktype_id" name="tasktype.id" onchange="changeType(this)">
							<option value="">无</option>
							
							<c:forEach items="${tasktypeList}" var="tasktype">
								<option id="select" value="${tasktype.id }">${tasktype.type }</option>
							</c:forEach>
							
							<option value="new">添加分类 ...</option>
						</select>
							<a href="${basePath }/crm/task/edittype.action">编辑分类</a>
					</div>
				</div>	
			</div>
			
			<button type="submit" class="btn btn-primary">保存修改</button>
				<button type="button" class="btn cancel">取消</button>
			</form>
		</div>

									</c:forEach>
									</div>
								</c:if>
								<c:if test="${fn:length(afterList) > 0 }">
									<div class="tasks later">
										<legend>以后</legend>
										
										<c:forEach items="${afterList }" var="t">
											
										<div id="task_818252" class="task checkbox">
										<span class="task_hover">
												<div class="task_actions" style="display: none; ">
													<a href="javascript:;" onclick="deleteTask(this)"  id="${t.id }" class="icon icon-trash" data-confirm="您确定要删除这个任务吗？" data-method="delete"  title="删除这个任务"></a>
													<a href="#" class="icon-edit" id="${t.id }" onclick="edittask(this)"></a>
												</div>
											
											<input id="${t.id }" name="task_done" onclick="done_task(this)" type="checkbox" value="1">
									
												<blockquote>
												<span style="background:#${t.tasktype.color};border-radius: 3px 3px 3px 3px;padding:1px 5px;color:#fff">${t.tasktype.type }</span>
												  <span>${t.title }</span>
												  <c:if test="${t.deal  != null}">
												 	( <i class="icon-dollar"></i>
												 	<a href="${basePath }/deal/show.action?id=${t.deal.id}">${t.deal.title }</a> )
												 </c:if>
												 <c:if test="${t.contact  != null}">
												 	( <i class="icon-person"></i>
												 	<a href="${basePath }/contact/show.action?id=${t.contact.id}">${t.contact.name }</a> )
												 </c:if>
												  <small>【${t.start } - ${t.end}】</small>
												</blockquote>
											</span>
										
										</div>
										
				<div class="edit" style="display:none; border:#CACED5 5px solid;width:450px">
			<form accept-charset="UTF-8" action="${basePath}/task/saveedit.action" class="form-inline" id="edit_category" method="post">
			<input id="user_id" name="user.id" type="hidden" value="${user.id }">
			<input id="task_id" name="task.id" type="hidden" value="${t.id }">
			<input id="task_type_id" type="hidden" value="${t.tasktype.id }">
			<div class="modal-header">
				<h3>编辑这个任务</h3>
			</div>
			
			<div class="modal-body">
				<div class="control-group string optional">
					<div class="controls">
						<input class="string optional span9" id="task_title" name="task.title" size="50" type="text" value="${t.title }">
					</div>
				</div>
			
				<div class="control-group string optional">
					<label class="string optional control-label" for="schedule_frame"> 到期时间？</label>
					<div class="controls">
						<select id="task_frame" name="time" onchange="change_task_frame_after($(this).val(), '#calendar_start_after','#calendar_end_after')">
							<option value="today" selected="selected">今天</option>
							<option value="tomorrow">明天</option>
							<option selected="selected" value="calendar">设置具体时间 ...</option>
						</select>
					</div>
				</div>		
				<span id="calendar_select" >
					<input id="calendar_start_after" name="task.start" type="text" onclick="WdatePicker({minDate:'%y-%M-{%d}',readOnly:true,dateFmt:'yyyy-MM-dd  HH:mm:ss',lang:'zh-cn'})" class="Wdate span2" placeholder="请输入开始时间" style=" width:200px ; display:block" value="${t.start }"/>
					&nbsp;
					<input id="calendar_end_after" name="task.end" type="text" onclick="WdatePicker({readOnly:true,minDate:'#F{$dp.$D(\'calendar_date_start\')}',dateFmt:'yyyy-MM-dd  HH:mm:ss',lang:'zh-cn'})" class="Wdate span2" placeholder="请输入结束时间" style=" width:200px ; display:block " value="${t.end }"/>
				</span>
				
				<div class="control-group integer optional">
					<label class="integer optional control-label" for="tasktype_id"> 选择一个分类</label>
					<div class="controls">
						<select  id="tasktype_id" name="tasktype.id" onchange="changeType(this)">
							<option value="">无</option>
							
							<c:forEach items="${tasktypeList}" var="tasktype">
								<option id="select" value="${tasktype.id }">${tasktype.type }</option>
							</c:forEach>
							
							<option value="new">添加分类 ...</option>
						</select>
							<a href="${basePath }/crm/task/edittype.action">编辑分类</a>
					</div>
				</div>	
			</div>
			
			<script type="text/javascript">
			
				function change_task_frame_after(a, b,c) {
					if(a == "calendar") {
					 	$(b).show(), $(c).show();
					} else {
						$(b).hide(), $(c).hide();
					}
				}
			</script>
			
			<button type="submit" class="btn btn-primary">保存修改</button>
				<button type="button" class="btn cancel">取消</button>
			</form>
		</div>
		
		
										
									</c:forEach>
									</div>
								</c:if>	
								</div>


					<script type="text/javascript">
										
						function edittask(obj){
						
							target = $(obj).parent().parent().parent();
							
							$(target).next(".edit").toggle();
							$("button.cancel").click(function(){
								$(target).next(".edit").hide();
							});
						}
						
						$(document).ready(function(){
							var tasktypeid = $("#task_type_id").val();
							if(tasktypeid != null) {
								$("#tasktype_id option").each(function(i){
									if(tasktypeid == $(this).val()) {
										$("#select").attr("selected","selected");
									}
								});
							}
						});			
						
					</script>

					<script type="text/javascript" charset="utf-8">
						function done_task(obj) {
							id = $(obj).attr("id");
							$.get("${basePath}/task/done.action",{"task.id":id},function(){
								$(obj).parent().parent().fadeOut();
							});
						}
					
						function deleteTask(obj) {
							id = $(obj).attr("id");
							$.get("${basePath}/task/delete.action",{"task.id":id},function(){
								$(obj).parent().parent().parent().fadeOut();
							});
						}
					
						$(document).ready(function() {
							$('span.task_hover').hover(function() {
								$(this).children().first().show();
							}, function() {
								$(this).children().first().hide();
							});
						});
					</script>
						</div>
						</div>
						
					</div>
				</div>
			</div>
			
			<div class="span4 sidebar">
					<div class="well">
						<a data-toggle="modal" href="#taskModal">添加任务</a>
					</div>
					<div class="well">
						<div class="title">使用日历来管理您的日程安排</div>
						<p>
							
							<strong><a href="taskcalendar.action">订阅您的日程安排</a></strong>
						</p>
					</div>

			</div>
		</div>
	</div>
</body>
</html>
